<template>
    <div class="goods banxin">
        <!-- 面包屑 -->
        <p>首页 / 全部商品</p>
        <img src="../assets/images/products/banner.png" alt="">
        <section class="list">
            <div>
                <strong>排序：</strong>
                <span v-for="(item, index) in sortArr" :key="index" :class="{ active: sortActive == index }"
                    @click="changeSort(item.min, item.max, index)">{{ item.txt }}</span>
            </div>
            <div>
                <strong>分类：</strong>
                <span v-for="(item, index) in classifyArr" :key="index" :class="{ active: classifyActive == index }"
                    @click="changeClassify(item.value, index)">{{ item.txt }}</span>
            </div>
        </section>
        <LoadMore :bigarr="goodsArr" :size="8">
            <Products slot-scope="scope" :arr="scope.samllarr" />
        </LoadMore>
    </div>
</template>

<script>
import Products from '@/components/Products.vue';
import { GoodsDataApi } from '@/request/api';
import { mapState, mapMutations } from 'vuex';
export default {
    data() {
        return {
            sortActive: 0,
            classifyActive: 0,
            // 排序
            sortArr: [
                { txt: "全部", min: 0, max: 10000 },
                { txt: "我能兑换的" },
                { txt: "0-500分", min: 0, max: 500 },
                { txt: "500-1000分", min: 500, max: 1000 },
                { txt: "1000-1500分", min: 1000, max: 1500 },
                { txt: "1500-2500分", min: 1500, max: 2500 },
            ],
            // 分类
            classifyArr: [
                { txt: "全部", value: 0 },
                { txt: "实物商品", value: 1 },
                { txt: "虚拟商品", value: 2 }
            ],
            // 商品
            goodsArr: []
        };
    },
    components: { Products },
    watch: {
        $route: {
            handler(newVal, oldVal) {
                if (newVal.query.keyword !== oldVal.query.keyword) {
                    this.$router.go(0);
                }
            }
        },
        deep: true,
    },
    created() {
        if (this.$route.query.keyword) {
            this.changeGoodsObj({ keyword: this.$route.query.keyword });
        } else {
            this.changeGoodsObj({ keyword: "" });
        }
        this.getGoodsFn();
    },
    computed: {
        ...mapState({
            goodsObj: (state) => state.goods.goodsObj
        }),
    },
    methods: {
        ...mapMutations({
            changeGoodsObj: "goods/changeGoodsObj",
        }),
        changeSort(min, max, index) {
            this.changeGoodsObj({ min, max });
            this.sortActive = index;
            this.getGoodsFn();
        },
        changeClassify(value, index) {
            this.changeGoodsObj({ type: value });
            this.classifyActive = index;
            this.getGoodsFn();
        },
        getGoodsFn() {
            GoodsDataApi(this.goodsObj).then((res) => {
                if (res.data.code === 0) {
                    this.goodsArr = res.data.data
                }
            });
        }
    }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

.goods {
    p{
        margin-bottom: 8px;
    }
    .list {
        padding: 40px 0 10px;

        div {
            margin-bottom: 32px;

            strong {
                font-weight: 700;
                margin-right: 10px;
                color: 10px;
            }

            span {
                color: #999;
                margin-right: 30px;
                cursor: pointer;

                &.active {
                    color: @blue;
                    font-weight: 700;
                }
            }
        }
    }
}
</style>